<template>
  <div class="main">
    <div id="map" class="map"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as turf from '@turf/turf';
import { Map, TileLayer, GroupTileLayer, GeoJSONVectorTileLayer, Extent } from 'maptalks-gl'

let map = null


onMounted(() => {
  map = new Map('map', {
    center: [122, 41],
    zoom: 8,
    attribution: false,
    spatialReference: {
      projection: 'EPSG:4326',
    },
    baseLayer: new GroupTileLayer('base', [
      // new TileLayer('td-vec', {
      //   urlTemplate: (x, y, z) => {
      //     const params = new URLSearchParams({
      //       url: `http://t0.tianditu.gov.cn/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}&tk=139dfd8b37e297aeca79662bcb0dfd83`,
      //     });
      //     return `/server-api/gis/proxy/get?${params.toString()}`
      //   },
      //   decodeImageInWorker: true,
      //   fetchOptions: {
      //     headers: {
      //       token1: '111',
      //       'accept': 'image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
      //       'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.26'
      //     }

      //   },
      // }),
      // new TileLayer('base0', {
      //       tileSystem: [1, -1, -5273200, 7202100],
      //       decodeImageInWorker: true,
      //       fetchOptions: {
      //           headers: {
      //               token1: '111',
      //               'accept': 'image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
      //               'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.26'
      //           }

      //       },
      //       // offset,
      //       urlTemplate: "./../assets/data/suzhou-yuanqu-tiles/{z}/{x}/{y}.png",
      //   })

      // new TileLayer('td-cva', {
      //   urlTemplate:
      //     '/server-api/gis/proxy/cva_w/{z}/{x}/{y}'

      // }),
    ]),
  })
  //  let ly = new TileLayer('td-vec', {
  //       urlTemplate: (x, y, z) => {
  //         const params = new URLSearchParams({
  //           url: `http://t0.tianditu.gov.cn/DataServer?T=vec_w&X=${x}&Y=${y}&L=${z}&tk=139dfd8b37e297aeca79662bcb0dfd83`,
  //         });
  //         return `/server-api/gis/proxy/get?${params.toString()}`
  //       },
  //       decodeImageInWorker: true,
  //       fetchOptions: {
  //         headers: {
  //           token1: '111',
  //           'accept': 'image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
  //           'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.26'
  //         }

  //       },
  //     })
  //     ly.addTo(map);
  let baseLayer = new TileLayer('base', {
    tileSystem: [1, -1, -180, 90],
    urlTemplate: 'http://120.52.31.31:590/service/api/egis/base/v1/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
    decodeImageInWorker: true,
    fetchOptions: {
      headers: {
        'Authorization': 'Basic MjJhNDJmNjVjOGM0NDcyNGI1NzAzZWZkNTRiZjU3ODI6YWE5MDAxNTMyYmQzNDI3OWE5N2UzYjAxYmY2MTczZjk=',
      }
    }
  })
  baseLayer.addTo(map);
})

</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}
</style>